<template>
  <div>
    <div style="">M-Form表单校验组件封装demo</div>
    <MFrom :model="model" :rules="rules" >
      <MFormItem prop="name" label="姓名">
        <MInput type="text" v-model="model.name"></MInput>
      </MFormItem>
      <MFormItem prop="password" label="密码">
        <MInput type="password"  v-model="model.password"></MInput>
      </MFormItem>
    </MFrom>

    <h1>{{model.name}}</h1>
  </div>
</template>
<script>
import MInput from "../../../components/m-form/mInput.vue";
import MFormItem from "../../../components/m-form/mFormItem.vue";
import MFrom from "../../../components/m-form/form.vue";

export default {
  components: {
    MInput,
    MFormItem,
    MFrom,
  },
  data() {
    return {
      model: {
        name: "123",
        password: "",
      },
      rules: {
        name: [{ required: true, message: "请输入姓名" }],
        password: [{ required: true, message: "请输入密码"}],
      },
    };
  },
};
</script>